<template>
  <div class="preview-cont"
       @drop="drop"
       @dragover="dragOver">
    <draggable v-model="tempViewList"
               @end="dragEnd"
               animation="300">
      <template v-for="(item, index) in tempViewList">
        <component :is="compList[item.type]['comps'][item.name]"
                   :compData="item"
                   :compIndex="index"
                   :previewList="previewList"
        ></component>
      </template>
    </draggable>
  </div>
</template>

<script>
  import Draggable from 'vuedraggable'

  export default {
    name: "PreviewPanel",
    components: {
      Draggable
    },
    props: ['compList', 'previewList'],
    data() {
      return {
        tempViewList: this.previewList, // 预览栏的所有组件
      }
    },
    methods: {
      drop(e) {
        this.$emit('dropEmit', e)
      },

      dragOver(e) {
        this.$emit('dragOverEmit', e)
      },

      dragEnd() {
        this.$emit('update:previewList', this.tempViewList)
      }
    }
  }
</script>

<style scoped lang="scss">
  .preview-cont {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    overflow: hidden auto;
  }
</style>